<template>
  <Separator
    class="t-separator"
    v-show="mappingProps.visible"
    v-bind="{ ...attrs, ...mappingProps }"
    :color="color"
    :style="lineStyle"
  >
  </Separator>
</template>

<!-- ts只是方便开发提示和补全代码，没有用语法 -->
<script setup type="typescript">
  import Separator from '@teld/q-components/Separator';
  import useMappingProps from 't/common/hooks/useMappingProps';
  import {
  	commonProps
  } from 't/common/utils';
  import { useAttrs, useSlots, computed } from 'vue';

  // 直接映射透传qursor的属性
  const attrs = useAttrs();
  // 父级组件传递来的slots
  const slots = useSlots();
  // 组件传参
  const props = defineProps(
  	{
  		...commonProps,
  		...Separator.props,
  		color: {
  			type: String,
  			default: 'rgba(120,120,120,0.2)'
  		},

  		// 长度
  		len: {
  			type: String,
  			default: ''
  		},
  	},
  );

  // 大写首字母属性
  const [mappingProps, mappingExpose] = useMappingProps(props);
  defineExpose(mappingExpose);

  // ============================= 颜色配置：quasar不支持hex颜色，需要转换成class形式  ===========================
  const color = computed(() => {
  	const { color } = mappingProps;
  	if (!color || color.length == 0) return '';
  	const isHex = color.startsWith('#') || color.startsWith('rgb') || color.startsWith('RGB');
  	// return isHex ? 'separator' : color;
  	// 分割线组件有bug，所以先这样兼容一下
  	return 'separator';
  })

  const lineStyle = computed(() => {
  	const { vertical, len } = mappingProps;
  	if (len == '') return {};
  	if (vertical) {
  		return { height: len }
  	} else {
  		return { width: len };
  	}
  })
</script>

<style lang="scss" scoped>
  // ============================= 颜色配置：quasar不支持hex颜色，需要转换成class形式  ===========================
  .text-separator {
    color: v-bind('mappingProps.color') !important;
  }

  .bg-separator {
    background: v-bind('mappingProps.color') !important;
  }
</style>
